<template>
	<view class="page">
		<div class="head">
			<view class="coupons">
				<view class="coupon">
					<view class="num">{{goldCouponNum}}</view>
					<view class="title">我的金券</view>
				</view>
				<view class="coupon">
					<view class="num">{{consumerCouponNum}}</view>
					<view class="title">我的消费券</view>
				</view>
			</view>
			<view class="exchange" @click="exchange">去兑换</view>
		</div>
		<view class="body">
			<scroll-view class="bags" :scroll-x="true">
				<view v-if="item.state === 2" class="bag bag-close" v-for="(item, index) in sendLog.list"
					:key="index" @click="openRedBag(item)">
					<view class="red-bag">
						<view class="rand">随机</view>
						<view class="sitename">{{item.site_name}}</view>
					</view>
				</view>
			</scroll-view>
			<view class="tips">100个金券可兑换一个消费券，点击上方金券红包领取吧</view>
			<!-- <view class="more">领取更多</view> -->
		</view>

		<view class="goods">
			<image src="https://ds.tianxiakj.com//public/diy_view/style2/img/title.png" class="line-image"></image>
			<diy-goods-list></diy-goods-list>
		</view>
		
		<!-- 红包封面 -->
		<view class="rbag_model" v-if="rbagmodelshow" @touchmove.prevent.stop>
			<view class="rbag_con hidden">
				<view class="rbag_top">
					<view class="rbag_top_info">
						<image class="rbag_logo" src="https://cskjz.baoliy168.com/public/static/img/bag-logo.png" mode=""></image>
						<view class="app_name">恭喜发财</view>
						<view class="rbag_tips">送您一个红包</view>
					</view>
				</view>
				<view class="open_rbag_btn" :animation="openbrnanimation" @click="openbtn()">開</view>
			</view>
			<view class="rbag_con">
				<view class="hide_btn" @click.stop="hidebtn">
					<icon type="cancel" color="#fbd977" size="28" />
				</view>
			</view>
		</view>
		
		<!-- 打开红包 -->
		<view class="open_rbag_model" v-if="openrbagmodelshow" @touchmove.prevent.stop>
			<image class="rbag_conbg" src="https://ds.tianxiakj.com/public/diy_view/style2/img/yellowRedBagOpen.png"></image>
			<view class="rbag_conbg open_rbag_con">
				<view class="open_title">— 恭喜您获得 —</view>
				<view class="rbag_detail">
					<view class="open_money">
						<countup :num="num" color="#c95948" width='20' height='20' fontSize='36'></countup>
					</view>
					<view class="open_tips">已存入账户金券，兑换消费券可用于支付抵扣</view>
				</view>
				<text class="shopname">{{shopName}}</text>
				<view class="lookbag_box">
					<view class="lookbag_btn" @click.stop="lookbagbrn()">
					{{activeName ? activeName : "商家暂未设置活动"}}
					</view>
				</view>
				<view class="hide_btn" @click.stop="hideopenbtn()">
					<icon type="cancel" color="#fbd977" size="28" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import diyImgAds from '@/components/diy-img-ads/diy-img-ads.vue';
	import diyGoodsList from '@/components/diy-goods-list/diy-goods-list.vue';
	import countup from '@/components/red-bag/countUp.vue';
	export default {
		data() {
			return {
				consumerCouponNum: 0,
				exchangeLog: {},
				goldCouponNum: 0,
				sendLog: {},
				useLog: {},
				num: 12.11,
				bag1animation: {},
				openbrnanimation: {},
				rbagmodelshow: false,
				openrbagmodelshow: false,
				shopName: "",
				activeName: "",
				url: "",
				id: 0
			}
		},
		components: {
			diyImgAds,
			diyGoodsList,
			countup
		},
		onLoad() {
			this.getPageData()
		},
		methods: {
			getPageData() {
				var that = this
				that.$api.sendRequest({
					url: '/consumercoupon/api/ConsumerCoupon/page',
					data: {
						sendLogPage: 1
					},
					success: res => {
						that.consumerCouponNum = res.data.consumerCouponNum
						that.exchangeLog = res.data.exchangeLog
						that.goldCouponNum = res.data.goldCouponNum
						that.sendLog = res.data.sendLog
						that.useLog = res.data.useLog
					}
				})
			},
			openRedBag(item) {
				var that = this
				if (item.state === 2) {
					that.rbagmodelshow = true;
					that.$api.sendRequest({
						url: '/consumercoupon/api/ConsumerCoupon/getGoldCouponInfo',
						data: {
							id: item.id
						},
						success: res => {
							that.num = res.num
							that.shopName = res.shopName
							that.activeName = res.activeName
							that.url = res.url
							that.id = item.id
						}
					})
				}
			},
			// 红包封面 => 关闭按钮
			hidebtn() {
				this.rbagmodelshow = false;
			},
			openbtn: function() {
				var that = this;
				var animation = uni.createAnimation({
					duration: 1000,
					timingFunction: 'ease',
				})
				that.openbrnanimation = animation;
				that.$api.sendRequest({
					url: '/consumercoupon/api/ConsumerCoupon/receiveGoldCoupon',
					data: {
						id: this.id
					},
					success: res => {
						if (res.code == 0) {
							animation.rotateY(360).step();
							that.openbrnanimation = animation.export();
							setTimeout(function() {
								that.rbagmodelshow = false;
								that.openrbagmodelshow = true;
								that.openbrnanimation = {};
							}, 1000);
						}
						setTimeout(() => {
							that.getPageData()
						}, 1000)
					}
				})
			},
			hideopenbtn() {
				this.openrbagmodelshow = false;
			},
			lookbagbrn() {
				if (this.url === "") {
					uni.showToast({
						title: "商家暂未设置活动",
						icon: "none",
						mask: true,
						duration: 1000
					})
					return;
				} 
					
				this.$util.redirectTo(this.url);
			},
			exchange() {
				if (this.goldCouponNum <= 0) {
					uni.showToast({
						title: "金券数量不足以兑换消费券",
						icon: "none",
						mask: true,
						duration: 1000
					})
					return;
				}
				this.$api.sendRequest({
					url: '/consumercoupon/api/ConsumerCoupon/exchangeConsumerCoupon',
					success: res => {
						if (res.code == 0) {
							uni.showToast({
								title: res.message,
								icon: "none",
								mask: true,
								duration: 1000
							})
						}
						setTimeout(() => {
							this.getPageData()
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scope>
	.page {
		display: flex;
		flex-direction: column;
		background: url('https://oss.tianxiakj.com/background.png') no-repeat;
		background-size: 100% 1300upx;

		.head {
			display: flex;
			flex-direction: column;
			padding: 60upx 30upx 0 30upx;

			.coupons {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;

				.coupon {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.num {
						font-size: 58upx;
						color: #FFF;
						font-weight: 600;
					}

					.title {
						color: #FFF;
						font-size: 25upx;
					}
				}
			}

			.exchange {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				border: 5upx solid #FFF;
				color: #FFF;
				font-size: 36upx;
				font-weight: 600;
				margin: 30upx 100upx;
				border-radius: 200upx;
			}
		}

		.body {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 0 10upx;
			padding: 20upx;
			background-color: #FFF;
			border-radius: 20upx;

			.bags {
				width: 100%;
				white-space: nowrap;

				.bag-close {
					background: url("https://ds.tianxiakj.com/public/diy_view/style2/img/yellowRedBag.jpg") no-repeat;
					background-size: 100% 100%;
					box-shadow: 5upx 5upx 5upx 2upx #eee;
				}

				.bag {
					width: 125upx;
					height: 150upx;
					display: inline-block;
					text-align: center;
					margin: 10upx 20upx;
					border-radius: 20upx;

					.num {
						margin-top: 8upx;
						font-size: 26upx;
						font-weight: bold;
						color: #865d2c;
					}
					
					.rand {
						font-size: 25upx;
						color: #865d2c;
						font-weight: 600;
						margin: 10upx 10upx 0 10upx;
					}

					.sitename {
						font-size: 18upx;
						font-weight: 600;
						overflow: hidden;
						color: #d7822f;
						padding: 3upx 8upx;
						text-align: center;
						margin: 0 10upx;
					}

					.state {
						margin-top: 30upx;
						font-size: 16upx;
						color: #aa5520;
					}
				}
			}

			.tips {
				font-size: 22upx;
				color: #999;
			}

			.more {
				margin: 20upx;
				padding: 20upx 200upx;
				background: linear-gradient(45deg, #fe3c19, #fd714a, #fe166c);
				color: #FFF;
				font-weight: 600;
				border-radius: 200upx;
			}
		}
		
		.goods {
			margin-top: 30upx;
			padding: 20upx;
			background-color: #FFF;
			.line-image {
				width: 100%;
				height: 60upx;
			}
		}
		.r_bag {
			.bag1 {
				position: fixed;
				left: -46upx;
				top: 160upx;
				width: 150upx;
				height: 100upx;
				z-index: 999;
			}
		}
		
		// 红包封面
		.rbag_model {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background-color: rgba(0,0,0,0.3);
			z-index: 1000;
			.rbag_con {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 80%;
				height: 840upx;
				background-color: #da4d44;
				margin: auto;
				border-radius: 14upx;
				box-shadow: 0upx 0upx 10upx rgba(0,0,0,0.2);
				.rbag_top {
					position: absolute;
					left: -20%;
					top: 0;
					width: 140%;
					height: 540upx;
					background-color: #e0534a;
					border-radius: 0 0 50% 50%;
					box-shadow: 0 0 14upx rgba(0,0,0,0.4);
					z-index: 1001;
					.rbag_top_info {
						margin-top: 60upx;
						.rbag_logo {
							width: 160upx;
							height: 160upx;
							border-radius: 50%;
							display: block;
							margin: 0 auto;
							overflow: hidden;
						}
						.app_name {
							font-size: 38upx;
							color: #f6ac96;
							text-align: center;
							margin-top: 18upx;
							letter-spacing: 1upx;
						}
						.rbag_tips {
							font-size: 50upx;
							color: #edddd3;
							text-align: center;
							margin-top: 34upx;
							letter-spacing: 1upx;
						}
					}
				}
				.open_rbag_btn {
					position: absolute;
					top: 450upx;
					left: 0;
					right: 0;
					width: 180upx;
					height: 180upx;
					line-height: 180upx;
					border-radius: 50%;
					margin: 0 auto;
					text-align: center;
					background-color: #ffd287;
					font-size: 55upx;
					color: #fef5e8;
					box-shadow: 2upx 2upx 6upx rgba(0,0,0,0.2);
					z-index: 1002;
				}
				.hide_btn {
					position: absolute;
					bottom: -110upx;
					left: 0;
					right: 0;
					width: 80upx;
					height: 80upx;
					line-height: 80upx;
					text-align: center;
					margin: 0 auto;
				}
			}
			.hidden {
				overflow: hidden;
			}
		}
		
		// 打开红包
		.open_rbag_model {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background-color: rgba(0,0,0,0.3);
			z-index: 1000;
			.rbag_conbg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 80%;
				height: 840upx;
				margin: auto;
				z-index: 1001;
			}
			.open_rbag_con {
				z-index: 1002;
				.open_title {
					height: 120upx;
					line-height: 120upx;
					text-align: center;
					font-size: 38upx;
					letter-spacing: 2upx;
					color: #e46965;
				}
				.rbag_detail {
					margin: 45upx 0;
					.open_money {
						text-align: center;
						font-size: 80upx;
						color: #c95948;
						font-weight: bold;
						display: flex;
						justify-content: center;
						.danwei {
							font-size: 30upx;
						}
					}
					.open_tips {
						text-align: center;
						font-size: 30upx;
						color: #d26762;
						margin-top: 30upx;
						padding: 0 50upx;
					}
				}
				.shopname {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					margin: 20upx 0;
				}
				.lookbag_box {
					margin-top: 245upx;
					display: flex;
					justify-content: center;
					.lookbag_btn {
						width: 70%;
						height: 90rpx;
						line-height: 90rpx;
						text-align: center;
						font-size: 32rpx;
						color: #fff;
						letter-spacing: 2rpx;
					}
				}
				.hide_btn {
					position: absolute;
					bottom: -110upx;
					left: 0;
					right: 0;
					width: 80upx;
					height: 80upx;
					line-height: 80upx;
					text-align: center;
					margin: 0 auto;
				}
			}
		}
		
	}
</style>
